<template>
	<div class="edit">
		<nav-bar />
		<div class="my-12-20">
			<edit-from label="头像">
				<div slot="avatar">
					<div class="avatar">
						<van-uploader :after-read="afterRead" />
						<img v-lazy="userInfo.user_img" v-if="userInfo.user_img">
						<img src="../../assets/images/default_img.jpg" v-else>
					</div>
				</div>
			</edit-from>
			<edit-from label="昵称" :value="userInfo.name" @click.native="showDialog('昵称')" />
			<edit-from label="UID" :value="userInfo.id" />
			<edit-from label="性别" :value="userInfo.gender || '保密'" @click.native="showDialog('性别')" />
			<edit-from label="个性签名" :value="userInfo.user_desc" @click.native="showDialog('个性签名')" />
			<!-- 弹出层 -->
			<van-dialog 
				v-model="show" 
				show-cancel-button 
				:title="title"
				@confirm="confirm"
			>
				<van-field v-model="content" :placeholder="'请输入' + title " />
			</van-dialog>
		</div>
		
		<van-button block text="退出登录" hairline @click="logout" />
		<van-button block text="返回空间" to="userinfo" hairline />
	</div>
</template>

<script>
	import { getUserInfo, uploadAvatar,  updateUserInfo } from '@/api'
	import NavBar from '@/components/common/NavBar.vue'
	import EditFrom from '@/components/common/EditFrom.vue'
	export default {
		name: 'Edit',
		data() {
			return {
				// 用户信息对象
				userInfo: {},
				// 是否显示弹出层
				show: false,
				// 对话框标题
				title: '',
				content: ''
			}
		},
		created() {
			this._getUserInfo()
		},
		methods: {
			// 获取用户信息
			_getUserInfo() {
				// 获取token
				const tokenStr = window.localStorage.getItem('token')
				// 判断是否有token
				if (!tokenStr) return this.$router.push({name: 'Login'})
				const id = window.localStorage.getItem('id')
				// 发送请求
				getUserInfo(id)
				.then(({data: res}) => {
					console.log('获取用户信息',res[0])
					this.userInfo = res[0]
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 图片上传回调函数
			async afterRead(file) {
				// 获取图片对象
				const fromdata = new FormData()
				fromdata.append('file',file.file)
				// 发送请求
				const {data:res} = await uploadAvatar(fromdata)
				console.log('上传用户头像', res)
				this.userInfo.user_img = res.url
				this._updateUserInfo()
			},
			// 更新用户信息
			async _updateUserInfo() {
				const id = window.localStorage.getItem('id')
				const data = this.userInfo
				const {data:res} = await updateUserInfo(id,data)
				console.log('更新用户信息',res)
				// 判断 code
				if (res.code !== 200) return this.$toast.fail('修改异常,请重新尝试!')
				this.$toast.success('修改成功')
			},
			// 显示对话框
			showDialog(title) {
				this.show = true
				this.title = title
				this.content = ''
			},
			// 对话框确定提交
			confirm() {
				// 判断是否为空
				if (!this.content.trim()) return 
				
				if (this.title === '昵称')
					this.userInfo.name = this.content
				if (this.title === '性别') {
					if (this.content !== '男' && this.content !== '女') return this.$toast('请输入正确性别')
					this.userInfo.gender = this.content
				}
				if (this.title === '个性签名')
					this.userInfo.user_desc = this.content
					// 调用修改请求
				this._updateUserInfo()
			},
			// 退出登录
			async logout() {
				const resultConfirm = await this.$dialog.confirm({
					title: '退出登录'
				}).catch(err => err)
				if (resultConfirm !== 'confirm') return this.$toast('取消退出')
				window.localStorage.removeItem('token')
				window.localStorage.removeItem('id')
				this.$router.push({name: 'Home'})
			}
		},
		components: {
			NavBar,
			EditFrom
		}
	}
</script>

<style lang="scss" scoped>
</style>